<template>
    <Layout style="height: 100%" class="main">
<!--        侧边栏-->
        <Sider class="sider-nav acea-row row-center row-column" style="max-width: 120px !important;min-width: 100px !important;">
            <div class="logo">
                <img class="" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/logo.jpg" alt="">
            </div>
            <div class="system">我爱收旧物回收管理端</div>
            <div class="muen-nav acea-row row-middle row-center row-column">
                <div>系统功能</div>
                <div class="shuline"></div>
                <div class="item acea-row row-middle row-around row-column" :class="this.$route.path=='/home/home'?'on':''" @click="cateClick(0)">
                    <div class="pic">
                        <img v-if="this.$route.path=='/home/home'" class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shuju-active.png" alt="">
                        <img v-else class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shujuzhanshi.png" alt="">
                    </div>
                    <div>数据展示</div>
                </div>
<!--                <div class="shuline"></div>-->
                <div class="item acea-row row-middle row-around row-column" :class="this.$route.path=='/home/order'?'on':''" @click="cateClick(1)">
                    <div class="pic">
                        <img v-if="this.$route.path=='/home/order'" class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/order-avtive.png" alt="">
                        <img v-else class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/dingdanshuju.png" alt="">
                    </div>
                    <div>预约订单</div>
                </div>

              <!--                <div class="shuline"></div>-->
              <div class="item acea-row row-middle row-around row-column" :class="this.$route.path=='/home/orderbox'?'on':''" @click="cateClick(5)">
                <div class="pic">
                  <img v-if="this.$route.path=='/home/orderbox'" class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shezhi-active.png" alt="">
                  <img v-else class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shezhi.png" alt="">
                </div>
                <div>回收箱订单</div>
              </div>
<!--                <div class="shuline"></div>-->
<!--                <div class="item acea-row row-middle row-around row-column" :class="this.$route.path=='/admin/account'?'on':''" @click="cateClick(2)">-->
<!--                    <div class="pic">-->
<!--                        <img v-if="this.$route.path=='/admin/account'" class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shezhi-active.png" alt="">-->
<!--                        <img v-else class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shezhi.png" alt="">-->
<!--                    </div>-->
<!--                    <div>账户设置</div>-->
<!--                </div>-->
<!--                <div class="item acea-row row-middle row-around row-column" :class="this.$route.path=='/home/account'?'on':''" @click="cateClick(2)">-->
<!--                    <div class="pic">-->
<!--                        <img v-if="this.$route.path=='/home/account'" class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shezhi-active.png" alt="">-->
<!--                        <img v-else class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/shezhi.png" alt="">-->
<!--                    </div>-->
<!--                    <div>账户设置</div>-->
<!--                </div>-->
<!--                <div class="shuline"></div>-->
                <div class="item acea-row row-middle row-around row-column" :class="this.$route.path=='/home/staff'?'on':''" @click="cateClick(3)">
                    <div class="pic">
                        <img v-if="this.$route.path=='/home/staff'" class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/yuangong-active.png" alt="">
                        <img v-else class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/yuangong-icon.png" alt="">
                    </div>
                    <div>员工列表</div>
                </div>
            </div>
            <div class="map-btn acea-row row-column row-middle row-center" v-if="this.$route.path=='/home/home'" @click="openMap">
<!--            <div class="map-btn acea-row row-column row-middle row-center" v-if="this.$route.path=='/home/home'">-->
                <div class="map">
                    <img class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/pic/map.png" alt="">
                </div>
                <div class="text" v-if="mapshow">收起地图</div>
                <div class="text" v-else>展开地图</div>
            </div>

        </Sider>

        <Layout>
<!--            顶部导航-->
            <Header class="header-nav acea-row row-between-wrapper">
                <div class="acea-row row-middle city-nav">
                    <Icon type="md-pin" :size="24" color="#3D3D3D"/>
                    <div>当前城市</div>
                    <div class="ml10">{{ citytitle }}</div>
<!--                    <Dropdown trigger="click" class="ml15" @on-click="muenClick">-->
<!--                        <div class="city-sel">-->
<!--                            {{ citytitle }}-->
<!--                            <Icon type="ios-arrow-down"></Icon>-->
<!--                        </div>-->
<!--                        <DropdownMenu slot="list">-->
<!--                            <template v-for="(item,index) in cityList">-->
<!--                                <DropdownItem :name="index" >{{ item }}</DropdownItem>-->
<!--                            </template>-->
<!--                        </DropdownMenu>-->
<!--                    </Dropdown>-->
                </div>

                <div class="user acea-row row-between-wrapper">
                    <div class="left-line"></div>
                    <Dropdown trigger="click" placement="bottom-end" @on-click="handleClick" :transfer="true">
                        <div class="acea-row row-middle">
                            <div class="nickname">
                                {{ info.real_name }}
                            </div>
                            <div class="user-logo">
                                <img class="imgwh" :src="info.head_pic" alt="">
                            </div>
                        </div>
                        <DropdownMenu slot="list">
                            <DropdownItem name="user">个人中心</DropdownItem>
                            <DropdownItem name="logout">退出登录</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>

                </div>

            </Header>
<!--            内容-->
            <Content :style="{ background: '#fff',padding: '20px' }">

                <div class="acea-row row-middle">
                    <Breadcrumb>
                        <BreadcrumbItem to="/">
                            <Icon type="ios-home-outline" :size="20"></Icon>
                        </BreadcrumbItem>
<!--                        <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>-->
                        <BreadcrumbItem style="color: #4589F6;">{{ this.$route.meta.title }}</BreadcrumbItem>
                    </Breadcrumb>
                    <div class="acea-row row-middle ml20" v-if="this.$route.path=='/home/home'">
                        <Icon type="ios-notifications" color="#FF6200" :size="22"/>
                        <div  class="waring">
                            报警：{{ Tips }}
                        </div>
                    </div>
                </div>
                <div class="" style="padding: 10px;">
                    <keep-alive>
                        <router-view v-if="$route.meta.keepAlive && reload" style="min-height: 600px"></router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive && reload" style="min-height: 600px"></router-view>
                </div>

            </Content>
        </Layout>

    </Layout>
</template>

<script>
    import { AccountLogout } from "../../api/account";
    import { getuserinfo } from '../../api/index'
    import { removeCookies } from "@/libs/util";
    export default {
        name: "Main",
        data(){
            return{
                cate:0,
                reload: true,
                info:[],
                Tips:'',
                citytitle:'南宁市',
                cityList:[
                    '南宁市',
                    '柳州市',
                    '桂林市'
                ],
                mapshow: true,
            }
        },
        mounted() {
            // console.log(this.$route.meta.title)
            // this.nowPath = this.$route.path;

        },
        computed:{
            tips(){
                return this.$store.state.userInfo.tips
            }
        },
        created() {
            this.info = this.$store.state.userInfo.userInfo;
            this.Tips = this.$store.state.userInfo.tips;
            this.getinfo();
        },
        methods:{
            openMap(){
              this.mapshow = !this.mapshow;
              this.$store.commit("userInfo/map_is_show", this.mapshow);
            },
            getinfo(){
                getuserinfo().then(res=>{
                    this.info = res.data;
                })
            },
            logout() {
                let that = this;
                this.$Modal.confirm({
                    title: "退出登录确认",
                    content: "您确定退出当前账户吗？",
                    onOk() {
                        AccountLogout()
                            .then((res) => {
                                that.$Message.success("您已成功退出");
                                that.$router.replace("/home/login");
                                localStorage.clear();
                                removeCookies("token");
                                removeCookies("expires_time");
                                removeCookies("uuid");
                                window.location.reload()
                            })
                            .catch((res) => {});
                    },
                });
            },
            handleClick(name) {
                switch (name) {
                    case 'logout':
                        this.logout();
                        break;
                    case 'user':
                        this.$router.push(`/home/user`)
                        break;
                }
            },
            muenClick(val){
                this.citytitle = this.cityList[val]
            },
            cateClick(type){
                this.cate = type;
                switch (type) {
                    case 0:
                        this.$router.push('/home/home')
                    break;
                    case 1:
                        this.$router.push('/home/order?type=1')
                    break;
                    case 2:
                        this.$router.push('/home/account')
                    break;
                    case 3:
                        this.$router.push('/home/staff')
                        break;
                    case 5:
                    this.$router.push('/home/orderbox?type=0')
                    break;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    body{ background-color: #ffffff !important; }
    .main{
        width: 100%;
        height: 100vh;

        .sider-nav{
            border-radius: 20px;
            background-color: #4589F6;
            /*overflow: scroll;*/
            padding: 30px 0;

            .logo{
                width: 80px;
                height: 80px;
                border-radius: 5px;
                /*background-color: #1890ff;*/
                margin: 0 auto;
                overflow: hidden;

                img{
                    width: 100%;
                    height: 100%;
                }
            }

            .system{
                font-size: 12px;
                color: #fff;
                margin: 15px auto 0 auto;
                text-align: center;
                width: 90px;
            }

            .muen-nav{
                color: #fff;
                font-size: 14px;
                margin-top: 50px;

                .shuline{
                    width: 2px;
                    height: 50px;
                    background-color: #ffffff;
                    margin: 10px 0;
                }
                .item~.item{
                    margin-top: 20px;
                }
                .item{
                    width: 120px;
                    height: 90px;
                    color: #fff;
                    font-size: 14px;
                    padding: 10px;

                    &.on{
                        background: #ffffff;
                        color: #1890ff;
                    }
                    .pic{
                        width: 30px;
                        height: 30px;
                        margin: 5px 0;
                    }
                }

            }
            .map-btn{
                width: 45px;
                height: 150px;
                background: #E7F0FF;
                border-radius: 40px;
                margin: 50px auto;

                .map{
                    width: 25px;
                    height: 25px;
                }
                .text{
                    writing-mode: vertical-rl;
                    color: #4486F9;
                    margin-top: 5px;
                    font-size: 14px;
                }
            }

        }

        .header-nav{
            background-color: #eeeeee;
            border-radius: 20px !important;
            /*overflow: hidden;*/
            color: #333;
            font-size: 14px;

            .city-nav{
                /*padding-left: 30px;*/
                color: #333;
                font-size: 16px;
            }
            .city-sel{
                font-size: 14px;
                color: #666666;
            }
            .user{

                .left-line{
                    width: 1px;
                    height: 30px;
                    background-color: #C1C1C1;
                }

                .nickname{
                    margin: 0 20px;
                }

                .user-logo{
                    width: 60px;
                    height: 60px;
                    background-color: #666;
                    border-radius: 8px;
                }

            }

        }

        .waring{
            color: #FF6200;
            font-size: 13px;
        }

    }
</style>
